<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>聊天记录</title>

    <link rel="stylesheet" href="../../../layui.css" />
    <style>
      body .layim-chat-main {
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="layim-chat-main">
      <ul id="LAY_view"></ul>
    </div>

    <div id="LAY_page" style="margin: 0 10px;"></div>

    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea
    >

    <!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->

    <script src="../../../../layui.js"></script>
    <script>
      function getToken() {
        if (window.sessionStorage.getItem("mall-token")) {
          var obj = JSON.parse(window.sessionStorage.getItem("mall-token"));
          return obj.content.a_token;
        }
        return "";
      }
      function getParam() {
        var url = window.location.search.substr(1);
        // console.log(url);
        var obj = {};
        if (!url) return false;

        var arr = url.split("&");
        // console.log(arr);
        for (var i = 0, len = arr.length; i < len; i++) {
          var params = arr[i].split("=");
          // console.log(params);
          obj[params[0]] = decodeURI(params[1]);
        }
        // console.log(obj);
        return obj;
      }
      layui.use(["layim", "laypage"], function() {
        var layim = layui.layim,
          layer = layui.layer,
          laytpl = layui.laytpl,
          $ = layui.jquery,
          laypage = layui.laypage;

        //聊天记录的分页此处不做演示，你可以采用laypage，不了解的同学见文档：http://www.layui.com/doc/modules/laypage.html

        //开始请求聊天记录
        var param = getParam(); //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据

        console.log(getToken());
        $.ajax({
          url: "/msg/message/getHistoryByFid",
          headers: {
            Authorization: getToken()
          },
          data: { fid: param.id },
          type: "Post",
          dataType: "json",
          success: function(res) {
            var html = laytpl(LAY_tpl.value).render({
              data: res.data
            });
            $("#LAY_view").html(html);
          }
        });

        // //实际使用时，下述的res一般是通过Ajax获得，而此处仅仅只是演示数据格式
        // ,res = {
        //   code: 0
        //   ,msg: ''
        //   ,data: [{
        //     username: '纸飞机'
        //     ,id: 100000
        //     ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897882000
        //     ,content: 'face[抱抱] face[心] 你好啊小美女'
        //   }, {
        //     username: 'Z_子晴'
        //     ,id: 108101
        //     ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897892000
        //     ,content: '你没发错吧？face[微笑]'
        //   },{
        //     username: 'Z_子晴'
        //     ,id: 108101
        //     ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897898000
        //     ,content: '你是谁呀亲。。我爱的是贤心！我爱的是贤心！我爱的是贤心！重要的事情要说三遍~'
        //   },{
        //     username: 'Z_子晴'
        //     ,id: 108101
        //     ,avatar: 'http://tva3.sinaimg.cn/crop.0.0.512.512.180/8693225ajw8f2rt20ptykj20e80e8weu.jpg'
        //     ,timestamp: 1480897908000
        //     ,content: '注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。\n该模版文件所在目录（相对于layui.js）：\n/css/modules/layim/html/chatlog.html'
        //   }]
        // }
        //
      });
    </script>
  </body>
</html>
